<template>
    <a-drawer :title="title" :width="450" @close="handleCancel" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="视频标题" prop="videoTitle" ref="videoTitle">
                <a-input :placeholder="placeholder.videoTitle" v-model="form.videoTitle" :disabled="isupdate"/>
            </a-form-model-item>
            <a-form-model-item label="视频简介" prop="videoIntroduction" ref="videoIntroduction">
                <a-textarea :rows="4" :placeholder="placeholder.videoIntroduction" v-model="form.videoIntroduction"/>
            </a-form-model-item>
            <!-- 状态 -->
            <a-form-model-item label="视频文件" prop="file" ref="file">
                <a-upload
                        slot="extra"
                        name="file"
                        :before-upload="beforeUpload"
                        :remove="handleRemove"
                >
                    <a-button :disabled="disabledBtn">
                        <a-icon type="upload"/>
                        点击选择视频文件
                    </a-button>
                </a-upload>
            </a-form-model-item>
        </a-form-model>
        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import {addFileMaterial} from "../../../public/http";

    export default {
        props: ['mediaType'],
        data() {
            return {
                disabledBtn: false,
                isupdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '添加视频素材',
                visible: true, //modal 显示状态
                labelCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 5
                    }
                },
                wrapperCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 16
                    }
                },
                placeholder: {
                    file: '请选择视频文件',
                    videoTitle: '视频标题',
                    videoIntroduction: '视频介绍',
                },
                form: {
                    videoIntroduction: '',
                    file: {},
                    videoTitle: '',
                },
                rules: {
                    file: [
                        {
                            validator: (rule, value, callback) => {
                                if (!value.type) {
                                    callback(new Error('请选择视频文件!'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'blur'
                        }
                    ],
                    videoTitle: [
                        {
                            required: true,
                            message: '请填写视频标题',
                            trigger: 'blur'
                        },
                        {
                            max: 50,
                            message: '视频标题请设置咋在50个字符以为',
                            trigger: 'blur'
                        }],
                    videoIntroduction: [
                        {
                            required: true,
                            message: '请填写视频介绍',
                            trigger: 'blur'
                        },
                        {
                            max: 100,
                            message: '门禁名称最多设置100个字符',
                            trigger: 'blur'
                        }
                    ],
                },
            };
        },
        methods: {
            //提交表单数据
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (!valid) {
                        return false
                    }
                    const allowTye = "mp4";
                    const fileType = this.form.file.type.split("/");
                    const chekType = allowTye.split("/").findIndex((value, index, arr) => {
                        return value === fileType[1]
                    });
                    if (chekType < 0) {
                        this.$notification['error']({
                            message: '视频素材添加失败',
                            description: '视频素材只允许上传' + allowTye + '格式文件'
                        });
                        return false;
                    }
                    const isLt10M = this.form.file.size / 1024 / 1024 < 10;
                    if (!isLt10M) {
                        this.$notification['error']({message: '视频素材添加失败', description: "视频素材的大小不能超过 10MB!"});
                        return false;
                    }
                    this.loading = true;
                    const formData = new FormData();
                    formData.append('file', this.form.file)
                    formData.append("mediaType", this.mediaType);
                    formData.append("videoIntroduction", this.form.videoIntroduction);
                    formData.append("videoTitle", this.form.videoTitle);
                    addFileMaterial(formData).then((res) => {
                        this.$exMod.ajaxMessage(res);
                        this.loading = false;
                        if (res.code === 0) {
                            this.$emit('closeFun', {render: true});
                        }
                    })
                });
            },
            handleRemove() {
                this.form.file = {};
                this.disabledBtn = false
            },
            //上传之前检查
            beforeUpload(file) {
                //返回FALSE 进行手动上上传
                this.form.file = file;
                this.disabledBtn = true;
                return false;
            },
            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeFun', {
                    render: false
                });
            },
        },
    };
</script>
